<template>
	<!-- :style="'height:'+winHeight+'px;'" -->
	<view class="contain" :style="'height:'+winHeight+'px;'" @touchmove.stop.prevent="() => {}">
		<view class="logo flex justify-center"><image mode="widthFix" src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/bg/yllogo.png"></image></view>
		<view class="FormBox">
				  <view class="flex justify-center switchTabs">
					  <u-tabs :list="list1" @click="clickTabs" lineColor="#000" lineHeight="0" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
				  </view>
				  <block v-if="loginMode==='手机登录'">
						  <!-- <view class="title">账号登录</view> -->
						  <view class="inputStyle" style="margin-top:30px;">
								 <u-input
									type="number"
									color="#000"
									prefixIcon="account-fill"
									:prefixIconStyle="prefixIconStyle"
									placeholder="请输入手机号"
									:placeholderStyle="placeholderStyle"
									:customStyle="inputCustomStyle"
									border="none"
									v-model="userCount"></u-input>
						  </view>
						  <view class="inputStyle">
								 <u-input
									type="number"
									color="#000"
									prefixIcon="lock-fill"
									:prefixIconStyle="prefixIconStyle"
									placeholder="请输入短信验证码"
									:placeholderStyle="placeholderStyle"
									:customStyle="inputCustomStyle"
									border="none"
									v-model="pwdVal">
								  </u-input>
								  <view class="suffix">
									  <!-- <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code> -->
									  <u-button @tap="getCode" :type="btnType" :disabled="isSend" size="mini">{{codeTips}}</u-button>
								  </view>
						  </view>
				  </block>
				  <block v-if="loginMode==='账号登录'">
					  <view class="inputStyle" style="margin-top:30px;">
							 <u-input
								type="number"
								color="#000"
								prefixIcon="account-fill"
								:prefixIconStyle="prefixIconStyle"
								placeholder="账号登录"
								:placeholderStyle="placeholderStyle"
								:customStyle="inputCustomStyle"
								border="none"
								v-model="loginCount"></u-input>
					  </view>
					  <view class="inputStyle">
							 <u-input
								type="password"
								color="#000"
								prefixIcon="lock-fill"
								:prefixIconStyle="prefixIconStyle"
								placeholder="登录密码"
								:placeholderStyle="placeholderStyle"
								:customStyle="inputCustomStyle"
								border="none"
								v-model="loginPassword">
							  </u-input>
					  </view>
				  </block>
				  <view class="loginBtn" @click="userLogin">
					  立即登录
				  </view>
				  <view class="forgotPwd">
					  <view class="left" @click="changeRem">
						  <view><u-checkbox shape="circle" :checked="checked" activeColor="#3C9CFF" size="22" iconSize="15" @change="changeCheck"/></view>
						  <text class="ft">记住账号</text>
					  </view>
					  <view class="right"><!-- <text class="ft"  @click="callkf">联系客服</text> --></view>
				  </view>
				 
		</view> <!-- FormBox End -->	  
		 <view class="flex justify-center mt-10"><text class="small" style="color:rgba(255,255,255,0.8);">伊倍乐教育旗下分校区</text></view>  
		<view class="bottom"></view>
	</view>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import {  onLoad } from '@dcloudio/uni-app'

import { bus } from '@/utils/bus'

import { userStore } from '@/stores/userStore'
let store = userStore();	
// let { hasLogin,token } = userStore();


let loginMode=ref("手机登录");

/* let { hasLogin,token,surName } = useStore(); */
let winWidth=ref(uni.$tools.GetScreenWidth());
let winHeight=ref(uni.$tools.GetScreenHeigth());

let timestart=ref(false);
let btnType=ref("primary");
let uCode=ref(); //申请对象
let codeTips=ref("获取验证码");
let codeValue=ref("");
let timeCount=ref(59);
let timer=null;
let checked=ref(true);

let isSend=ref(false);

const userCount=ref("");
const pwdVal=ref("");

const loginCount=ref("");
const loginPassword=ref("");

const placeholderStyle=reactive({
	"color":"#3C9CFF",
	"fontSize":"16px",
	"paddingLeft":"10px"
});
const prefixIconStyle=reactive({
	"color":"#3C9CFF",
	"fontSize":"28px"
});
const inputCustomStyle=reactive({
	"color":"#3C9CFF",
});

const activeStyle=reactive({
	"color":"#000",
	"fontWeight":"600",
	"fontSize":"18px"
});
const inactiveStyle=reactive({
	"color":"#000",
	"fontSize":"15px"
});

const list1=reactive(
[	{
		name: '手机登录',
	}, {
		name: '账号登录',
	}
]);

const clickTabs=(e:any)=>{
	console.log(e);
	if(e.index===1){
		loginMode.value="账号登录";
	}else{
		loginMode.value="手机登录";
	}
}

const changeRem=()=>{
	checked.value=!checked.value;
	console.log("改变记住账号",checked.value);
	if(checked.value===false){
		uni.removeStorageSync("userCount"); //删除当前账号
		userCount.value="";
	}
	//console.log("是否保存密码:",checked.value);
}

const changeCheck=(e:any)=>{
	console.log(e);
	if(!e){
		checked.value=false;
		uni.removeStorageSync("userCount"); //删除当前账号
	}
}


//获取验证码
const getCode=()=>{
	
	isSend.value=true;
	
	// console.log("请输入手机号")
	// uni.$tools.Toast("请输入手机号");
	pwdVal.value="";
	
	// //保存用户信息，后续使用
	store.$state.phone=userCount.value;
	
	// //保存用户账号
	if(checked.value){
		console.log("记住账号...");
		uni.setStorageSync("userCount",userCount.value);
	}else{
		uni.removeStorageSync("userCount");
	}
	
	if(timestart.value){
		uni.$tools.Toast("验证码已发送 请注意查收！网络可能存在延迟 请耐心等待");
		return;
	}
	
	if (!/\S/.test(userCount.value)) {
		uni.$tools.Toast("请输入手机号");
		return;
	}
	const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
	if (!regMobile.test(userCount.value)) {
		return uni.$tools.Toast("手机号码输入有误");
	}
		
	/* setTimeout(()=>{
		uni.$tools.Toast("验证码已发送 请注意查收");
	},1000); */
	
	let paraData={
		phoneNumber:userCount.value,
		sessionId:(uni.getStorageSync("sid")===null || uni.getStorageSync("sid")==="")?null:uni.getStorageSync("sid")
	}
	console.log("电话参数:",paraData);
	uni.$tools.Reqeust('/api/sendMessage',paraData,'POST').then((res:any)=>{
			console.log('发送验证码结果:',res);
			if (res.data.code == 200) {
				//这里保存sessionid
				uni.setStorageSync("sid",res.data.sid);
				timestart.value=true;
				btnType.value="info";
				if(timer!=null) clearInterval(timer);
				timer=setInterval(()=>{
					if(timeCount.value<=0){
						if(timer!=null) clearInterval(timer);
						timer=null;
						btnType.value="primary";
						isSend.value=false;
						timeCount.value=59;
						codeTips.value="获取验证码";
						timestart.value=false;
						return;
					}
					codeTips.value=timeCount.value+"秒后获取";
					timeCount.value--;
				},1000);
				setTimeout(()=>{
					uni.$tools.Toast("验证码已发送 请注意查收");
				},1000);
			}else{
				uni.$tools.Toast(res.data.msg);
				isSend.value=false;
			}
	})
}

const callkf=()=>{
	uni.navigateTo({
	  url: '/pages/services/services'
	});
}


const phoneLogin=()=>{
	if(!/\S/.test(userCount.value)){
		uni.$tools.Toast("请输入手机号");
		return;
	}
	if(!/\S/.test(pwdVal.value)){
		uni.$tools.Toast("请输入短信验证码");
		return;
	}
	let paraData={
		phoneNumber:userCount.value,
		code: pwdVal.value,
		sessionId:(uni.getStorageSync("sid")===null || uni.getStorageSync("sid")==="")?null:uni.getStorageSync("sid")
	}
	console.log("登录参数:",paraData);
	uni.$tools.Reqeust('/api/login',paraData,'POST').then((res:any)=>{
			console.log('登录结果:',res);
			if (res.data.code == 200) {
				
				store.$state.hasLogin=true;
				uni.setStorageSync("token",res.data.data.token); //用于接口 Authorization验证
				store.$state.token=res.data.data.token;
				store.$state.userData.userinfo=res.data.data;
				uni.$tools.Toast("登录成功");
				
				bus.emit('hasLoginEvent',true);
				uni.setStorageSync("hasLogin",true);
				
				setTimeout(()=>{
					//uni.navigateBack();
					uni.$tools.GoUrl("/pages/index/index",2);
				},1000);
				
				//uni.$tools.GoUrl("/pages/mine/mine",2);
			}else{
				uni.$tools.Toast(res.data.msg);
			}
	})
}

const countLogin=()=>{
	if(!/\S/.test(loginCount.value)){
		uni.$tools.Toast("请输入登录账号");
		return;
	}
	if(!/\S/.test(loginPassword.value)){
		uni.$tools.Toast("请输入登录密码");
		return;
	}
	let paraData={
		logname:loginCount.value,
		logpwd: loginPassword.value,
		sessionId:(uni.getStorageSync("sid")===null || uni.getStorageSync("sid")==="")?null:uni.getStorageSync("sid")
	}
	console.log("登录参数:",paraData);
	uni.$tools.Reqeust('/api/countlogin',paraData,'POST').then((res:any)=>{
			console.log('登录结果:',res);
			if (res.data.code == 200) {
				
				store.$state.hasLogin=true;
				uni.setStorageSync("token",res.data.data.token); //用于接口 Authorization验证
				store.$state.token=res.data.data.token;
				store.$state.userData.userinfo=res.data.data;
				uni.$tools.Toast("登录成功");
				
				bus.emit('hasLoginEvent',true);
				uni.setStorageSync("hasLogin",true);
				
				setTimeout(()=>{
					//uni.navigateBack();
					uni.$tools.GoUrl("/pages/index/index",2);
				},1000);
				
				//uni.$tools.GoUrl("/pages/mine/mine",2);
			}else{
				uni.$tools.Toast(res.data.msg);
			}
	})
}

const userLogin=()=>{
	if(loginMode.value==='手机登录'){
		phoneLogin();
	}else{
		countLogin();
	}
}

onLoad(()=>{
	console.log("页面高度:",winHeight.value);
	userCount.value=uni.getStorageSync("userCount");
});	

</script>
<style>
page{
	background-color:"#3C9CFF";
}
</style>
<style lang='scss' scoped>
	@import "login.scss";
</style>